<template>
    <div class="main">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/managemain' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>机房管理</el-breadcrumb-item>
        <el-breadcrumb-item>机房设置</el-breadcrumb-item>
      </el-breadcrumb>
      <el-card>
        <div>
          <div class="diaomain">
            <el-input placeholder="请输入查询教工号" v-model="input3" class="input-with-select"></el-input>
            <el-button slot="append" icon="el-icon-search" @click="searchbutn"></el-button>
          </div>
          <el-table
            :data="tableData.filter(data => !search || data.location.toLowerCase().includes(search.toLowerCase()))"
            style="width: 100%" border>
            <el-table-column
                  label="ID"
                  prop="id">
            </el-table-column>
            <el-table-column
                  label="机房类型"
                  prop="type">
            </el-table-column>
            <el-table-column
                  label="机房位置"
                  prop="location">
            </el-table-column>
            <el-table-column
                  label="机房名称"
                  prop="name">
            </el-table-column>
            <el-table-column
                label="机房大小"
                prop="size">
            </el-table-column>
            <el-table-column
                label="机房状态">
                <template slot-scope="scope">
                    <span v-if="scope.row.status=='1'">{{"使用"}}</span>
                    <span v-else>{{"禁用"}}</span>
                </template>
            </el-table-column>
            <el-table-column
              align="left">
              <template slot="header">
                  <el-tag type="success">机房管理功能模块选择区域</el-tag>
              </template>
              <template slot-scope="scope">
                <el-button-group>
                  <el-button type="danger" size="mini" @click="dialogFormVisible = true">增加</el-button>
                  <el-button type="warning" size="mini" @click="dialogFormVisible2 = true">编辑</el-button>
                  <el-button type="primary" size="mini" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </el-button-group>
                <el-dialog title="课程增加" :visible.sync="dialogFormVisible">
                  <el-form :model="addform">
                    <el-form-item label="机房名称" :label-width="formLabelWidth">
                      <el-input v-model="addform.name" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="机房类型" :label-width="formLabelWidth">
                      <el-input v-model="addform.type" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="机房大小" :label-width="formLabelWidth">
                      <el-input v-model="addform.size" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="机房位置" :label-width="formLabelWidth">
                      <el-input v-model="addform.location" autocomplete="off"></el-input>
                    </el-form-item>
                  </el-form>
                  <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="addSubmitForm">确 定</el-button>
                  </div>
                </el-dialog>
                <el-dialog title="机房状态编辑" :visible.sync="dialogFormVisible2">
                  <el-form :model="changform">
                    <el-form-item label="机房ID" :label-width="formLabelWidth">
                      <el-input v-model="changform.id" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="机房名字" :label-width="formLabelWidth">
                      <el-input v-model="changform.name" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="机房类型" :label-width="formLabelWidth">
                      <el-input v-model="changform.type" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="机房位置" :label-width="formLabelWidth">
                      <el-input v-model="changform.location" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="机房状态" :label-width="formLabelWidth">
                      <el-radio v-model="changform.status" label="1">可用</el-radio>
                      <el-radio v-model="changform.status" label="0">禁用</el-radio>
                    </el-form-item>
                  </el-form>
                  <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible2 = false">取 消</el-button>
                    <el-button type="primary" @click="changSubmitForm">确 定</el-button>
                  </div>
                </el-dialog>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            layout="total"
            :total="this.tableData.length">
          </el-pagination>
        </div>
      </el-card>
    </div>
</template>

<script>
export default {
  data () {
    return {
      tableData: [],
      addform: {
        name: '',
        type: '',
        size: '',
        location: ''
      },
      changform: {
        id: '',
        type: '',
        size: '',
        location: '',
        name: '',
        status: ''
      },
      search: '',
      input3: '',
      dialogFormVisible: false,
      dialogFormVisible2: false,
      formLabelWidth: '120px'
    }
  },
  async created () {
    await this.$http.get(
      '/laboratory/findAll',
      { 'Content-Type': 'application/json' }
    ).then(res => {
      if (res.data.code === 200) {
        console.log(res)
        this.tableData = res.data.datas.labs
      }
    })
  },
  methods: {
    searchbutn () {
      this.search = this.input3
    },
    use (index, row) {
      this.tableData[index].isshow = '使用'
    },
    use1 (index, row) {
      this.tableData[index].isshow = '禁用'
    },
    async handleDelete (index, row) {
      this.$http.defaults.headers.post['Content-Type'] = 'application/json'
      const res = await this.$http.post('/laboratory/deleteById', { id: this.tableData[index].id })
      if (res.data.code === 200) {
        this.$message.success('机房删除成功')
      }
      this.tableData.splice(index, 1)
    },
    async addSubmitForm () {
      this.$http.defaults.headers.post['Content-Type'] = 'application/json'
      const res = await this.$http.post('/laboratory/addLab', JSON.stringify(this.addform))
      if (res.data.code === 200) {
        this.$message.success('机房增加成功')
      }
      this.dialogFormVisible = false
    },
    async changSubmitForm () {
      this.$http.defaults.headers.get['Content-Type'] = 'application/json'
      const res = await this.$http.get('/laboratory/updateLab', JSON.stringify(this.changform))
      if (res.data.code === 200) {
        this.$message.success('机房更改成功')
      }
      this.dialogFormVisible2 = false
    }
  }
}
</script>
<style>
.el-dialog__title{
  float: left;
  position: relative;
  left: 5%;
}
.el-form{
  position: relative;
  width: 80%;
  left: 0;
}
.el-form-item__content{
  width: 80%;
}
.el-form-item__content .el-input{
  width: 100%;
}
</style>
<style lang="less" scoped>
.el-card{
  .diaomain{
    .el-input{
    width: 30%;
    position: relative;
    left: 66.5%;
    }
    .el-button{
      float: right;
    }
  }
  .el-table{
    height: 600px;
    overflow: auto;
  }
}
</style>
